<template>
  <Tel
    :attributes="attributes"
    :events="events"
  >
    <template #com>
      <Quill v-model="value"/>
      <div class="output">output: {{ value }}</div>
    </template>
  </Tel>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import Tel from './template/Tel.vue'
import { Quill } from '@/components/RichEditor'
import { Attribute, Event } from './type'
export default defineComponent({
  name: 'ExampleRichEditor',
  components: {
    Quill,
    Tel
  },
  setup() {
    const attributes: Array<Attribute> = [
      {
        argu: 'v-model',
        instruction: '返回输入的html文本',
        type: 'string',
        option: '-',
        default: '-'
      },
      {
        argu: 'height',
        instruction: '容器的高度',
        type: 'string',
        option: '-',
        default: '10vh'
      },
      {
        argu: 'width',
        instruction: '容器的宽度',
        type: 'string',
        option: '-',
        default: '100%'
      },
      {
        argu: 'placeholder',
        instruction: '无内容时显示',
        type: 'string',
        option: '-',
        default: '请输入内容'
      },
      {
        argu: 'toolbar',
        instruction: '菜单的功能模块',
        type: 'Array<Object>',
        option: '-',
        default: '-'
      },
      {
        argu: 'modules',
        instruction: 'quill第三方插件',
        type: '',
        option: '-',
        default: '-'
      },
      {
        argu: 'theme',
        instruction: 'quil 主题',
        type: 'string',
        option: '-',
        default: 'snow'
      },
      {
        argu: 'disabled',
        instruction: '是否禁用输入框',
        type: 'boolean',
        option: '-',
        default: 'false'
      },
      {
        argu: 'maxLength',
        instruction: '最大输入文本个数',
        type: 'number',
        option: '-',
        default: '-'
      }
    ]
    const events: Array<Event> = [
      {
        name: 'change',
        instruction: '文本变化时触发',
        argu: '当前容器 html 内容'
      }
    ]
    const value = ref('')
    return {
      value,
      attributes,
      events
    }
  }
})
</script>
<style lang="less" scoped>
.output {
  margin-top: 10px;
  background-color: aqua;
  padding: 10px;
  color: #000;
}
</style>
